<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#a_selectAll").click(function () {
                // 发送异步请求获取所有账户信息
                $.get("account/findAllAccount.do", function (data) {
                    // 解析data   [{},{},{}]
                    var tr = "<tr>\n" +
                        "        <th>ID</th>\n" +
                        "        <th>NAME</th>\n" +
                        "        <th>MONEY</th>\n" +
                        "    </tr>";
                    $(data).each(function () {
                        /* 不管是JS数组还是jQuery对象数组 遍历出来的每个值都是JS对象 */
                        /*　this 是一个JS对象　｛｝是一个JSON对象　可以直接通过点语法取值　*/
                        /* this其实就是一个JSON对象  {} */
                        tr += "<tr>\n" +
                            "        <td>" + this.id + "</td>\n" +
                            "        <td>" + this.name + "</td>\n" +
                            "        <td>" + this.money + "</td>\n" +
                            "    </tr>"
                    });
                    $("#showAllAccountData").html(tr);
                }, "json");
            });

            $("#btn_addAccount").click(function () {
                // 获取表单中的数据 然后异步提交到后台
                $.post("account/addAccount.do", $("#addAccountForm").serialize());
            });

            $("#btn_delAccount").click(function () {
                // 找到输入的要删除的name 发送给后台
                $.post("account/delAccount.do",{"accountName":$("#delName").val()});
            });

            $("#btn_updateAccount").click(function () {
                // 获取表单中的数据 然后异步提交到后台
                $.post("account/updateAccount.do", $("#updateAccountForm").serialize());
            });

            $("#btn_selectOneName").click(function () {
                // 找到输入的要删除的name 发送给后台
                $.post("account/findAccountByName.do",{"accountName":$("#selectOneName").val()},function (data) {
                    // {id:1,name:"zhas",money:1000}
                    $("#selectOnResult").html(data.money);
                },"json");
            });


            $("#btn_tranMoney").click(function () {
                // 获取表单中的数据 然后异步提交到后台
                $.post("account/transAccount.do", $("#transMoney").serialize());
            });
        });
    </script>
</head>
<body>
<!-- 如果是超链接 我们发送的是同步请求 所以我们需要给超链接绑定单击事件 -->
<h2><a href="javascript:" id="a_selectAll">查询所有账户信息</a></h2>
<table width="800" border="1" id="showAllAccountData">
</table>

<hr>
<h2> 添加一条记录到Account</h2>
<form id="addAccountForm">
    NAME: <input type="text" name="name"> <br>
    MONEY: <input type="text" name="money"> <br>
    <input type="button" value="添加记录" id="btn_addAccount">
</form>

<hr>
<h2>删除一条记录</h2>
<input type="text" name="accountName" id="delName"> &nbsp;&nbsp;
<input type="button" value="删除记录" id="btn_delAccount">

<hr>
<h2> 修改一条记录到Account</h2>
<form id="updateAccountForm">
    NAME: <input type="text" name="name"> <br>
    MONEY: <input type="text" name="money"> <br>
    <input type="button" value="修改记录" id="btn_updateAccount">
</form>

<hr>
<h2>查询一条记录余额</h2>
<input type="text" name="accountName" id="selectOneName"> &nbsp;&nbsp;
<input type="button" value="查询记录" id="btn_selectOneName">&nbsp;&nbsp;
<span id="selectOnResult"></span>

<hr>
<h2> 转账 </h2>
<form id="transMoney">
    NAME: <input type="text" name="formName"> <br>
    NAME: <input type="text" name="toName"> <br>
    MONEY: <input type="text" name="money"> <br>
    <input type="button" value="开始转账" id="btn_tranMoney">
</form>

</body>
</html>